<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/yesterday_limit2_mycss.css') }}" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>昨日连板</title>
<script src="{{ url_for('static',filename='js/jquery-2.1.1.min.js') }}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<style type="text/css">
    body {
        /*CSS margin(外边距)属性定义元素周围的空间*/
        margin: 0;
        /* CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距 */
        padding: 0;
        /* background-color: rgb(31, 33, 45); */
    }
    /* 分时和K线 */
    
    .m_k_line {
        width: 100%;
        /* float: left; */
        /* margin-top: 60px; */
        height: 100%;
    }
    /* 分时线 */
    
    .m-line {
        height: 200px;
        width: 30%;
        float: left;
    }
    /* 分时线 */
    
    .m-line-1 {
        height: 300px;
        width: 30%;
        float: left;
        /* margin-top: 10px;
        margin-right: 30px;
        margin-bottom: 30px;
        margin-left: 30px; */
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }
    /* 分时线 */
    
    .m-line-2 {
        height: 200px;
        width: 30%;
        float: left;
    }
    /* K线 */
    
    .K-line {
        height: 200px;
        width: 30%;
        /* float: left; */
    }
    /* K线 */
    
    .K-line-1 {
        height: 200px;
        width: 30%;
        float: left;
    }
    /* K线 */
    
    .K-line-2 {
        height: 200px;
        width: 30%;
        float: left;
    }
</style>

<body>
    <div id="createtable" /*style="width:50%;float:left;" */ align="center">
        <h2 id="zt" style="margin-bottom:0;background-color:#FFA500;width:85%;">涨停板</h2>
        <div>
            <table id="mytable" class="altrowstable">
                <th class="tb1">股票名称</th>
                <th class="tb2">价格</th>
                <th class="tb3">涨幅</th>
                <th class="tb4">涨速</th>
                <th class="tb5">主力净额</th>
                <th class="tb6">主力买</th>
                <th class="tb7">主力卖</th>
                <th class="tb8">领涨次数</th>
                <th class="tb9">板块</th>
                <th class="tb10">区间涨幅</th>
                <th class="tb11">成交额</th>
                <th class="tb12">总市值</th>
                <th class="tb13">流通市值</th>
                <th class="tb14">实际流通</th>
                <th class="tb15">实际换手</th>
                <th class="tb16">净流占比</th>
                <th class="tb17">量比</th>
                <th class="tb18">收盘封单</th>
                <th class="tb19">最大封单</th>
            </table>
        </div>
    </div>
    <div id="Kline-div" class="m_k_line">
        <!-- <div id="m-line" class="m-line"></div>
        <div id="m-line-1" class="m-line-1"></div>
        <div id="m-line-2" class="m-line-2"></div>
        <div id="k-content" class="K-line"></div>
        <div id="k-content-1" class="K-line-1"></div>
        <div id="k-content-2" class="K-line-2"></div> -->
    </div>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script src="{{ url_for('static',filename='js/tmpData.js') }}"></script>
    <script src="{{ url_for('static',filename='js/k-line.js') }}"></script>
    <script src="{{ url_for('static',filename='js/update.js') }}"></script>
    <script>
        var column_table = 19; //总列数
        var all_theme = []; //题材数组
        var ID_THREAD = -1; //循环线程
        // 发送ajax请求，从后台获取json数据
        $(document).ready(function() {
            auto_update();
        });

        function UpdateTable(data) {
            all_theme = [];
            update_tables(data)
            for (var row = 0; row < data['list'].length; row++) {
                var tb = document.getElementById("mytable"); //获取表格的dom节点

                for (var column = 0; column < column_table; column++) {
                    var td = tb.rows[row + 1].cells[column]; //获取0行0列的td单元格
                    // td.setAttribute('class', 'black');       //设置属性
                    // td.setAttribute('bgcolor', 'white');       //设置属性

                    if (column == 0) {
                        var code = data.list[row][column];
                        var name = data.list[row][column + 1];
                        td.innerHTML = "<div class=\"tb1 name\">" + String(name) + "</div>" + "<div class=\"code\">" +
                            String(code) + "<span style=\"color:green\">" + data.list[row][24] + "</span>" + "</div>";
                        // td.innerHTML = name
                        // if (data.list[row][40]) {
                        //     td.setAttribute('class', 'green');       //设置属性
                        // }
                    } else if (column == 1) {
                        td.innerHTML = data.list[row][5];
                    } else if (column == 2) {
                        //判断是否涨停
                        if (!(data.list[row][23].slice(0, 1) === "昨")) {
                            // td.setAttribute('bgcolor', 'yellow'); //设置属性
                        } else {
                            // td.setAttribute('bgcolor', 'white'); //设置属性
                        }
                        td.innerHTML = "<div >" + String(data.list[row][6] + "%") + "</div>" + "<div>" +
                            "<span style=\"color:green\">" + String(data.list[row][23]) + "</span>" + "</div>";
                        if (data.list[row][6] < 0) {
                            td.setAttribute('class', 'green'); //设置属性
                        } else if (data.list[row][6] > 0) {
                            td.setAttribute('class', 'red'); //设置属性
                        } else if (data.list[row][6] == 0) {
                            td.setAttribute('class', 'black'); //设置属性
                        }
                    } else if (column == 3) {
                        td.innerHTML = (data.list[row][9].toFixed(2) + "%");
                        if (data.list[row][9] < 0) {
                            td.setAttribute('class', 'green'); //设置属性
                        } else if (data.list[row][9] > 0) {
                            td.setAttribute('class', 'red'); //设置属性
                        } else if (data.list[row][9] == 0) {
                            td.setAttribute('class', 'black'); //设置属性
                        }
                    } else if (column == 4) {
                        td.innerHTML = format_money(data.list[row][13]);
                        if (data.list[row][13] < 0) {
                            td.setAttribute('class', 'green'); //设置属性
                        } else if (data.list[row][13] > 0) {
                            td.setAttribute('class', 'red'); //设置属性
                        } else if (data.list[row][13] == 0) {
                            td.setAttribute('class', 'black'); //设置属性
                        }
                    } else if (column == 5) {
                        td.innerHTML = format_money(data.list[row][11]);
                        if (data.list[row][11] < 0) {
                            td.setAttribute('class', 'green'); //设置属性
                        } else if (data.list[row][11] > 0) {
                            td.setAttribute('class', 'red'); //设置属性
                        } else if (data.list[row][11] == 0) {
                            td.setAttribute('class', 'black'); //设置属性
                        }
                    } else if (column == 6) {
                        td.innerHTML = format_money(data.list[row][12]);
                        if (data.list[row][12] < 0) {
                            td.setAttribute('class', 'green'); //设置属性
                        } else if (data.list[row][12] > 0) {
                            td.setAttribute('class', 'red'); //设置属性
                        } else if (data.list[row][12] == 0) {
                            td.setAttribute('class', 'black'); //设置属性
                        }
                    } else if (column == 7) {
                        td.innerHTML = data.list[row][22];
                    } else if (column == 8) {
                        td.innerHTML = data.list[row][4];
                        //数据统计
                        all_theme = all_theme.concat({
                            name: data.list[row][4],
                            value: 1
                        })
                    } else if (column == 9) {
                        td.innerHTML = (data.list[row][20] + "%");
                        if (data.list[row][20] < 0) {
                            td.setAttribute('class', 'green'); //设置属性
                        } else if (data.list[row][20] > 0) {
                            td.setAttribute('class', 'red'); //设置属性
                        } else if (data.list[row][20] == 0) {
                            td.setAttribute('class', 'black'); //设置属性
                        }
                    } else if (column == 10) {
                        td.innerHTML = format_money(data.list[row][7]);
                    } else if (column == 11) {
                        td.innerHTML = format_money(data.list[row][37]);
                    } else if (column == 12) {
                        td.innerHTML = format_money(data.list[row][38]);
                    } else if (column == 13) {
                        td.innerHTML = format_money(data.list[row][10]);
                    } else if (column == 14) {
                        td.innerHTML = (data.list[row][8].toFixed(2) + "%");
                    } else if (column == 15) {
                        td.innerHTML = (data.list[row][19] + "%");
                        if (data.list[row][19] < 0) {
                            td.setAttribute('class', 'green'); //设置属性
                        } else if (data.list[row][19] > 0) {
                            td.setAttribute('class', 'red'); //设置属性
                        } else if (data.list[row][19] == 0) {
                            td.setAttribute('class', 'black'); //设置属性
                        }
                    } else if (column == 16) {
                        td.innerHTML = data.list[row][21].toFixed(2);
                    } else if (column == 17) {
                        td.innerHTML = format_money(data.list[row][28]);
                    } else if (column == 18) {
                        td.innerHTML = format_money(data.list[row][29]);
                    } else {
                        td.innerHTML = data.list[row][column]
                    }
                }

            }

        }

        function history_update_table(data) {
            //更新历史涨停
            all_theme = [];
            update_tables(data)
            for (var row = 0; row < data['list'].length; row++) {
                var tb = document.getElementById("mytable"); //获取表格的dom节点

                for (var column = 0; column < column_table; column++) {
                    var td = tb.rows[row + 1].cells[column]; //获取0行0列的td单元格
                    td.setAttribute('class', 'black'); //设置属性

                    if (column == 0) {
                        var code = data.list[row][column]
                        var name = data.list[row][column + 1]
                            // < !--td.innerHTML = "<div class=\"tb1 name\">" + String(name) + "</div>" + "<div class=\"code\">" + String(code) + "</div>"-- >
                        td.innerHTML = name
                        if (data.list[row][24]) {
                            td.setAttribute('class', 'green'); //设置属性
                        }
                    } else if (column == 1) {
                        var date = new Date(parseInt(data.list[row][6]) * 1000)
                        td.innerHTML = format_date(date);
                    } else if (column == 2) {
                        td.innerHTML = data.list[row][9];
                        if (data.list[row][9] != "首板") {
                            td.setAttribute('class', 'red'); //设置属性
                        }
                    } else if (column == 3) {
                        td.innerHTML = data.list[row][16];
                        //数据统计
                        all_theme = all_theme.concat({
                            name: data.list[row][16],
                            value: 1
                        })
                    } else if (column == 4) {
                        td.innerHTML = data.list[row][11];
                    } else if (column == 5) {
                        var date = new Date(parseInt(data.list[row][25]) * 1000)
                        td.innerHTML = format_date(date);
                    } else if (column == 6) {
                        td.innerHTML = format_money(data.list[row][23]);
                    } else if (column == 7) {
                        td.innerHTML = format_money(data.list[row][8]);
                    } else if (column == 8) {
                        td.innerHTML = format_money(data.list[row][12]);
                    } else if (column == 9) {
                        td.innerHTML = format_money(data.list[row][13]);
                    } else if (column == 10) {
                        td.innerHTML = (data.list[row][14] + "%");
                    } else if (column == 11) {
                        td.innerHTML = format_money(data.list[row][15]);
                    } else {
                        td.innerHTML = data.list[row][column]
                    }
                }

            }

        }

        function format_money(money) {
            //金钱转换
            if (money > 0) {
                if (money / 10000 > 10000) {
                    return (money / 100000000).toFixed(2) + "亿"
                } else if (money / 10000 > 1) {
                    return (money / 10000).toFixed(0) + "万"
                }
            } else if (money == 0) {
                return 0;
            } else {
                money = Math.abs(money);
                if (money / 10000 > 10000) {
                    return "-" + (money / 100000000).toFixed(2) + "亿"
                } else if (money / 10000 > 1) {
                    return "-" + (money / 10000).toFixed(0) + "万"
                }
            }
        }

        function format_date(data) {
            //格式化日期 (data=时间戳)
            new Date(parseInt(data) * 1000)
            var h = addZero(data.getHours());
            var m = addZero(data.getMinutes());
            var s = addZero(data.getSeconds());
            return h + ":" + m + ":" + s;

            function addZero(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
        }

        function add_row(row, column) {
            //增加新行
            var c = document.getElementById('mytable'); //获得表格的信息
            for (var i_row = 0; i_row < row + 1; i_row++) {
                var x = c.insertRow(1); //插入一行
                for (var i = 0; i < column; i++) { //依次向新行插入表格列数的单元格
                    var y = x.insertCell(i);
                    y.setAttribute('class', 'tb' + parseInt(i + 1)); //设置属性
                }
            }
        }

        function update_tables(data) {
            //增删表格
            var row = data['list'].length; //数据行数
            var c = document.getElementById('mytable'); //获得表格的信息
            var count_delete = c.rows.length - 1 - row
            if (count_delete != 0) { //如果是向一个空表增加一行
                if (count_delete > 0) {
                    for (var i = 0; i < count_delete; i++) {
                        c.deleteRow(1); //删除多余的行
                    }
                } else {
                    add_row(Math.abs(count_delete), column_table); //增加的行数
                }
            }
        }

        function count_all() {
            //数据统计
            var fruitTotal = []; // 存最终数据结果

            // 数据按照水果名称进行归类
            var nameContainer = {}; // 针对键name进行归类的容器
            all_theme.forEach(item => {
                nameContainer[item.name] = nameContainer[item.name] || [];
                nameContainer[item.name].push(item);
            });

            console.log(nameContainer); // 按照水果名称归类完成：{ apple: Array(2), banana: Array(2) }

            // 统计不同种类水果的数量
            var fruitName = Object.keys(nameContainer); // 获取水果种类：["apple", "banana"]
            fruitName.forEach(nameItem => {
                let count = 0;
                nameContainer[nameItem].forEach(item => {
                    count += item.value; // 遍历每种水果中包含的条目计算总数
                });
                fruitTotal.push({
                    value: count,
                    name: nameItem
                });
            });

            console.log(fruitTotal);
            return fruitTotal
        }

        function getData() {
            var m_data = []
            $.ajax({
                url: '/yesterday_limit2',
                data: {},
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function(data) {
                    UpdateTable(data);
                    // auto_update(data);
                    // set_option();
                    set_title_zt(data);
                    m_data = data;
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
            return m_data;
        };

        function get_data(date) {
            $.ajax({
                url: '/history',
                data: {
                    date
                },
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function(data) {
                    history_update_table(data);
                    // auto_update(data);
                    set_option();
                    set_title_zt(data);
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
        };

        function get_date() {
            //获取当前日期
            var d = new Date();
            var m_date = d.getFullYear() + "-" + String(parseInt(d.getMonth()) + 1) + "-" + d.getDate();
            return m_date;
        }

        function get_time() {
            //获取当前时间
            var d = new Date();
            var m_date = d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds();
            // return m_date;
            // 判断时间是否在开盘时间段
            if ((15 * 60 * 60) > (d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds()) && (d.getHours() * 60 *
                    60 + d.getMinutes() * 60 + d.getSeconds()) > (9 * 60 * 60 + 15 * 60)) {
                return true
            } else {
                return false
            }
        }

        function is_running() {
            if (get_time()) {
                getData();
                return true;
            } else {
                if (ID_THREAD != -1) {
                    clearInterval(ID_THREAD)
                    return false;
                }
            }
        }

        function auto_update() {
            data = getData();
            if (get_date() == data.Day[0]) {
                ID_THREAD = setInterval('is_running()', 1000 * 3); //指定3秒刷新一次
            } else {
                if (ID_THREAD != -1) {
                    clearInterval(ID_THREAD)
                }
            }
        }

        function set_title_zt(data) {
            //更新涨停数量
            var zt = document.getElementById('zt'); //获得表格的信息
            zt.innerHTML = "昨日连板" + "(" + data['list'].length + ")"
        }

        // document.getElementById('Kline-div').innerHTML = "<div id=\"m-line\" class=\"m-line\"></div>"
        // var mChart = echarts.init(document.getElementById('m-line'));
        // var mChart_1 = echarts.init(document.getElementById('m-line-1'));
        // var mChart_2 = echarts.init(document.getElementById('m-line-2'));
        // var kChart = echarts.init(document.getElementById('k-content'));
        // var kChart_1 = echarts.init(document.getElementById('k-content-1'));
        // var kChart_2 = echarts.init(document.getElementById('k-content-2'));



        // mChart.setOption(initMOption(getTrend(1, 600300), 'hs'));
        // mChart_1.setOption(initMOption(getTrend(), 'hs'));
        // mChart_2.setOption(initMOption(getTrend(), 'hs'));
        // document.getElementById('Kline-div').innerHTML = "<div id=\"k-content\" class=\"K-line\"></div>"
        // var kChart = echarts.init(document.getElementById('k-content'));
        // kChart.setOption(initKOption(getKline(300318)));
        // // kChart_1.setOption(initKOption(getKline()));
        // // kChart_2.setOption(initKOption(getKline()));



        function running() {
            console.log("..........running()")
            if (is_running()) {
                data = getData();
                for (var i = 0; i < data['list'].length; i++) {
                    document.getElementById("Kline-div").innerHTML += "<div id=\"m-line-" + i + "\" class=\"m-line-1\"></div> ";
                }
                for (var i = 0; i < data['list'].length; i++) {
                    mChart = echarts.init(document.getElementById('m-line-' + i));
                    mChart.setOption(initMOption(getStockTrend(data['list'][i][0]), data['list'][i][1], 'hs'));
                }
            }
        }

        setInterval('running()', 1000 * 10); //指定3秒刷新一次
    </script>
</body>

</html>